<template>
	<v-container>
		<v-data-table :mobile-breakpoint="0" mobile-breakpointdense class="elevation-1" :items="data.list" :options="data.options" @update:options="data.update($event)" :headers="headers" :server-items-length="data.total" :loading="data.loading" hide-default-footer>
			<template v-slot:top>
				<v-toolbar flat color="white">
					<v-toolbar-title>{{name}}</v-toolbar-title>
					<v-spacer></v-spacer>
					<v-radio-group v-if="$size.sm" v-model="mode" row hide-details>
						<v-radio v-for='item in modes' :label="item.text" :value="item.value"></v-radio>
					</v-radio-group>
					<v-select v-else v-model="mode" :items="modes"></v-select>
					<v-btn color="success" @click="data.search()" class="ml-2">搜索</v-btn>
				</v-toolbar>
				<v-card flat>
					<v-card-text>
						<span style="font-size:.8rem"><span class="green--text">绿色</span>代表使用了加倍券</span>
					</v-card-text>
				</v-card>
			</template>
			<template v-slot:item.uid="{item}">
				<div class="flex-center">
					<img style="width:2rem" :src="item.user.avatar" />
					<span>{{item.user.name}}</span>
				</div>
			</template>
			<template v-slot:item.price="{item}">
				<span :class="{'green--text':item.x2}">{{item.x2?item.price*1.2:item.price}}</span>
			</template>
			<template v-slot:item.create_at="{item}">
				<i-date :value="item.create_at"></i-date>
			</template>
			<template v-slot:item.pay_at="{item}">
				<i-date :value="item.pay_at"></i-date>
			</template>
			<template v-slot:item.mode="{item}">
				{{["待处理", "支付宝收款", "微信收款", "支付宝转账"][item.mode]}}
			</template>
			<template v-slot:item.tools="{item}">
				<v-btn color="green" @click="deal(item)" small text>处理</v-btn>
			</template>
			<template v-slot:footer v-if="data.totalPage>1">
				<v-divider></v-divider>
				<i-page class="pa-2" circle :value="data.options.page-1" @input="data.options.page=$event+1" :total="data.total"></i-page>
			</template>
		</v-data-table>
		
		<i-modal :open.sync="body">
			<div v-if="body" class="form-dialog">
				<i-radio inline label="支付方式" v-model="body.mode" :opts='["待处理", "支付宝收款", "微信收款", "支付宝转账"]' :enables="[1,body.addr.alipay,body.addr.wechat,body.addr.account]"></i-radio>
				<hr>
				<div class="tac" v-if="body.mode==1">
					<img style="width:200px" :src="body.addr.alipay" />
				</div>
				<div class="tac" v-if="body.mode==2">
					<img style="width:200px" :src="body.addr.wechat" />
				</div>
				<div v-if="body.mode==3">
					<div>支付宝账号：<i-span title="支付宝账号" copy>{{body.addr.account}}</i-span>
					</div>
					<div>支付宝名称：<i-span title="支付宝名称" copy>{{body.addr.name}}</i-span>
					</div>
				</div>
				<v-textarea label="备注" v-model="body.remark"></v-textarea>
				<hr>
				<div class="tar">
					<v-btn @click="submit" color="success" text>确定</v-btn>
				</div>
			</div>
		</i-modal>
	</v-container>
</template>
<script>
export default {
	name: "PayList",
	props: {
		name: String,
	},
	data() {
		return {
			mode: -1,
			body: null,
			data: new utils.DataSource(this.query).sortBy('id', 1),
			modes: ["全部", "待处理", "支付宝收款", "微信收款", "支付宝转账"].map((x, i) => ({ text: x, value: i - 1 })),
		}
	},
	computed: {
		headers() {
			var modes = ["待处理", "支付宝收款", "微信收款", "支付宝转账"];
			return [{
				value: "id",
				text: "#",
			}, {
				value: "uid",
				text: "用户",
			}, {
				value: "price",
				text: "金额",
			}, {
				value: "create_at",
				text: "申请时间",
				sortable: false,
			}, {
				value: "pay_at",
				text: "支付时间",
				sortable: false,
			}, {
				value: "mode",
				text: "方式",
				sortable: false,
			}, {
				value: "remark",
				text: "备注",
				sortable: false,
			}, {
				value: "tools",
				text: '操作',
				sortable: false,
				align: 'center',
			}]
		}
	},
	watch: {
		mode() {
			this.data.search(0)
		}
	},
	methods: {
		query(query) {
			query = Object.assign(query, { more: 1, mode: this.mode < 0 ? null : this.mode })
			return this.$get('pay/request_list', query)
		},
		deal(item) {
			this.item = item;
			this.body = Object.assign({}, item)
		},
		async submit() {
			let { id, mode, remark } = this.body;
			let data = { id, mode, remark };
			await this.$post('pay/request_deal', data);
			data.pay_at = +new Date();
			Object.assign(this.item, data)
			ivue.toast.success('修改成功');
			this.body = false;
		},
	},
	mounted() {

	},
	components: {

	},
}
</script>
<style lang="less">
@import "~@/styles/define.less";
.views-pay-list {
	padding: 1rem;
	max-width: 50rem;
	margin: 0 auto;
}
</style>
